<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" crossorigin="anonymous">

    <title th:text="${article.getTitle()}">Hello, world!</title>
</head>
<style>

    #article {
        background: rgb(255, 255, 255);
        box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px, rgba(0, 0, 0, 0.08) 0 2px 8px;
        border-radius: 8px;
        padding: 14px 16px 1px;
        margin-top: 24px;
        margin-right: 30px;
        float: right;
    }

    #toc-container {
        background: rgb(255, 255, 255);
        box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px, rgba(0, 0, 0, 0.08) 0 2px 8px;
        border-radius: 8px;
        padding: 14px 16px 1px;
        user-select: none;
        margin-top: 24px;
        display: none;
    }

    #user-container {
        background: rgb(255, 255, 255);
        box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px, rgba(0, 0, 0, 0.08) 0 2px 8px;
        border-radius: 8px;
        padding: 14px 16px 1px;
        user-select: none;
        margin-top: 24px;
    }
</style>
<body>
<div th:replace="~{common/navigationbar::navigationbar('index')}"></div>

<link rel="stylesheet" th:href="@{/editor/css/editormd.preview.css}"/>

<div class="d-flex justify-content-between container">
    <div class="d-flex flex-column col-md-4">
        <!--作者信息-->
        <div id="user-container">
            <!--作者头像-->
            <div class="text-center">
                <!--用户有头像-->
                <div th:if="${author.getAvatar()!=null && author.getAvatar()!=''}">
                    <img th:src="${author.getAvatar()}" alt="..." class="rounded-lg" style="width: 75px;height: 75px">
                </div>
                <!--用户没有头像-->
                <div th:if="${author.getAvatar()==null || author.getAvatar()==''}">
                    <svg width="75px" height="75px" viewBox="0 0 16 16" class="bi bi-person-fill"
                         fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                              d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path>
                    </svg>
                </div>
            </div>

            <h5 style="text-align: center" th:text="${author.getUsername()}"></h5>
            <table class="table table-borderless table-sm">
                <thead>
                <tr>
                    <th scope="col" style="text-align: center" class="text-muted">文章</th>
                    <th scope="col" style="text-align: center" class="text-muted">浏览</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="text-align: center">
                        <a class="text text-decoration-none text-info" href="#" th:text="${author.getPosts()}">10</a>
                    </td>
                    <td style="text-align: center">
                        <a class="text text-decoration-none text-muted">3000</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <!--toc容器-->
        <div id="toc-container"></div>
    </div>

    <!--文本内容-->
    <div id="article" class="col-md-8">
        <div id="markdown-view">
            <!--标题-->
            <h1 th:class="text-muted" th:text="${article.getTitle()}" style="text-align: center">标题</h1>
            <!--文章创建时间-->
            <div class="text-muted" style="float: right" th:text="${article.getFormattedCreateTime()}"></div>
            <!--浏览量-->
            <div class="text-decoration-none">
                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-eye" fill="currentColor"
                     xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                          d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z"></path>
                    <path fill-rule="evenodd"
                          d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"></path>
                </svg>
                <a style="pointer-events: none" class="text-muted" th:text="${article.getViews()}"></a>
            </div>

            <!-- Server-side output Markdown text editor.md渲染的内容 通过markdown-view获取元素-->
            <label>
                <textarea style="display:none;" th:text="${article.getContent()}">### Hello world!</textarea>
            </label>
        </div>
        <hr class="my-4">
        <div class="row">
            <div class="col">
                <p class="left text-muted" th:text="${'更新时间：'+article.getFormattedModifiedTime()}"></p>
            </div>
            <div class="col">
                <a class="text-muted text-decoration-none" href="#" style="float: right">举报</a>
                <div class="dropleft" style="float: right;margin-right: 10px"
                     th:if="${session.loginUser != null && author.getUid()==session.loginUser.getUid()}">
                    <a type="button" class="text-muted" style="float: right" data-toggle="dropdown" aria-haspopup="true"
                       aria-expanded="false">操作</a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" onclick="deleteArticle()">删除</a>
                        <a class="dropdown-item"
                           th:href="@{'/blog/article/update/' + ${article.getId()} + '/' + ${author.getUid()}}">修改</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script th:src="@{/js/jquery-3.5.1.js}"></script>
<script th:src="@{/editor/editormd.js}"></script>
<script th:src="@{/editor/lib/marked.min.js}"></script>
<script th:src="@{/editor/lib/prettify.min.js}"></script>
<script type="text/javascript">
    $(function () {
        let testView = editormd.markdownToHTML("markdown-view", {
            tocContainer: "#toc-container",  //自定义toc容器
            emoji: true,
            toc: true
        });
        let $tocContent = $(".markdown-toc-list");
        if ($tocContent.html() !== "") {
            $("#toc-container").css("display", "inline");
        }
    });

    function deleteArticle() {
        let articleId = "[[${article.getId()}]]";
        let authorUid = "[[${author.getUid()}]]"; //用于验证用户是否有权限删除文章
        //选择弹窗
        let r = window.confirm("是否真的要删除文章？");
        if (r) {
            //发送删除请求
            $.ajax({
                type: 'DELETE',
                url: '/api/article/' + articleId + '/' + authorUid,
                success: function (data) {
                    window.location.replace("/blog")
                },
                error: function () {
                    alert("删除失败");
                }
            });
        }
    }
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script th:src="@{/js/jquery-3.5.1.js}" crossorigin="anonymous"></script>
<script th:src="@{/js/popper.min.js}" crossorigin="anonymous"></script>
<script th:src="@{/js/bootstrap.min.js}" crossorigin="anonymous"></script>
</body>
</html>